<template>
  <section>
    <div
      class="message-time-container"
      v-bind:class="{ checked: sharedPickState.messages.indexOf(message) >= 0 }"
    >
      <p v-if="this.message._showTime" class="time">{{ message._timeStr }}</p>
      <div
        class="message-content-container"
        v-bind:class="{
          checked: sharedPickState.messages.indexOf(message) >= 0,
        }"
      >
        <!-- <input
          id="checkbox"
          v-if="sharedConversationState.enableMessageMultiSelection"
          type="checkbox"
          class="checkbox"
          :value="message"
          placeholder=""
          v-model="sharedPickState.messages"
        /> -->

        <!-- 选中状态 -->
        <template v-if="sharedConversationState.enableMessageMultiSelection">
          <img
            class="icon-radio"
            src="@/kang/img/icon_radio_checked.png"
            v-show="sharedPickState.messages.indexOf(message) >= 0"
          />
          <img
            class="icon-radio"
            src="@/kang/img/icon_radio.png"
            v-show="sharedPickState.messages.indexOf(message) < 0"
          />
        </template>

        <div class="message-avatar-content-container">
          <!-- 文件的进度条有点特殊，有进度的消息的进度条有点特殊 -->
          <FadeLoader
            :loading="message.status === 0 && message.messageContent.type !== 5"
            color="#848484"
            style="margin: 10px"
            width="3px"
            height="8px"
            margin="2px"
            radius="8px"
          >
          </FadeLoader>
          <i
            v-if="message.status === 2"
            class="icon-ion-close-circled"
            style="color: red"
            @click="resend"
          />
          <div class="flex-column flex-align-end">
            <MessageContentContainerView
              :message="message"
              class="message-content-container-view"
              v-bind:class="{ highlight: highLight }"
              @contextmenu.prevent.native="
                openMessageContextMenu($event, message)
              "
            />
            <QuoteMessageView
              v-if="quotedMessage"
              style="padding: 5px 0"
              :preview="true"
              :message="message"
              :quoted-message="quotedMessage"
              :enable-message-preview="true"
              :message-digest="
                this.message.messageContent.quoteInfo.messageDigest
              "
              :show-close-button="false"
            />
          </div>

          <!-- <tippy
            :to="'#infoTrigger' + this.message.messageId"
            :animate-fill="false"
            placement="left"
            distant="7"
            theme="light"
            animation="fade"
            trigger="click"
          >
            <template #content>
              <UserCardView
                v-on:close="closeUserCard"
                :user-info="message._from"
              />
            </template>
          </tippy> -->

          <!-- <BaseImage
            ref="userCardTippy"
            :id="'infoTrigger' + this.message.messageId"
            class="kang-avatar"
            @click="onClickUserPortrait(message.from)"
            draggable="false"
            :src="message._from ? message._from.portrait : ''"
          ></BaseImage> -->

          <BaseImage
            class="kang-avatar"
            :src="message._from ? message._from.portrait : ''"
          ></BaseImage>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import UserCardView from '../../user/UserCardView.vue'
import Message from '../../../../wfc/messages/message'
import MessageContentContainerView from './MessageContentContainerView.vue'
import store from '../../../../store'
import LoadingView from '../../../common/LoadingView.vue'
import wfc from '../../../../wfc/client/wfc'
import ConversationType from '../../../../wfc/model/conversationType'
import { gte } from '../../../../wfc/util/longUtil'
import MessageReceiptDetailView from './MessageReceiptDetailView.vue'
import QuoteMessageView from './QuoteMessageView.vue'
import Config from '../../../../config'
import FadeLoader from 'vue-spinner/src/FadeLoader.vue'

export default {
  name: 'NormalOutMessageContentView',
  props: {
    message: {
      type: Message,
      required: true,
    },
  },
  data() {
    return {
      sharedConversationState: store.state.conversation,
      sharedPickState: store.state.pick,
      highLight: false,
      quotedMessage: null,
    }
  },
  components: {
    QuoteMessageView,
    LoadingView,
    FadeLoader,
    MessageContentContainerView,
    UserCardView,
    // TextMessageContentView,
  },
  mounted() {
    this.$eventBus.$on('contextMenuClosed', this.onContextMenuClosed)

    if (this.message.messageContent.quoteInfo) {
      let messageUid = this.message.messageContent.quoteInfo.messageUid
      let msg = store.getMessageByUid(messageUid)
      if (!msg) {
        wfc.loadRemoteMessage(
          messageUid,
          (ms) => {
            msg = store._patchMessage(ms)
            this.quotedMessage = msg
          },
          (err) => {
            console.log('load remote message error', messageUid, err)
          }
        )
      } else {
        this.quotedMessage = msg
      }
    }
  },
  beforeUnmount() {
    this.$eventBus.$off('contextMenuClosed', this.onContextMenuClosed)
  },

  methods: {
    onContextMenuClosed() {
      this.highLight = false
    },
    onClickUserPortrait(userId) {
      wfc.getUserInfo(userId, true)
    },
    closeUserCard() {
      console.log('closeUserCard', this.$refs['userCardTippy'])
      this.$refs['userCardTippy']._tippy.hide()
    },
    resend() {
      wfc.deleteMessage(this.message.messageId)
      wfc.sendMessage(this.message)
    },
    openMessageContextMenu(event, message) {
      this.$emit('openMessageContextMenu', event, message)
      this.highLight = true
    },

    showMessageReceiptDetail() {
      let conversation = this.message.conversation
      if (conversation.type === ConversationType.Single) {
        return
      }

      let timestamp = this.message.timestamp
      let readEntries = this.sharedConversationState.currentConversationRead

      if (conversation.type === ConversationType.Group) {
        let groupMembers = wfc.getGroupMemberIds(conversation.target, false)
        if (!groupMembers || groupMembers.length === 0) {
          // do nothing
        } else {
          let readUserIds = []
          let unreadUserIds = []
          groupMembers.forEach((memberId) => {
            let readDt = readEntries ? readEntries.get(memberId) : 0
            if (
              (readDt && gte(readDt, timestamp)) ||
              this.message.from === memberId
            ) {
              readUserIds.push(memberId)
            } else {
              unreadUserIds.push(memberId)
            }
          })
          let readUsers = store.getUserInfos(readUserIds, conversation.target)
          let unreadUsers = store.getUserInfos(
            unreadUserIds,
            conversation.target
          )

          this.$modal.show(
            MessageReceiptDetailView,
            {
              readUsers: readUsers,
              unreadUsers: unreadUsers,
            },
            null,
            {
              name: 'message-receipt-detail-modal',
              width: 480,
              height: 300,
              clickToClose: true,
            },
            {}
          )
        }
      }
    },
  },

  computed: {
    messageReadStatus() {
      return {
        sendTime: this.message.timestamp,
        messageReceipt: this.messageReceipt,
      }
    },
    messageReceipt() {
      let conversation = this.message.conversation
      let timestamp = this.message.timestamp
      let receiptDesc = ''
      let readEntries = this.sharedConversationState.currentConversationRead

      if (conversation.type === ConversationType.Single) {
        let readDt = readEntries ? readEntries.get(conversation.target) : 0
        readDt = readDt ? readDt : 0

        if (gte(readDt, timestamp)) {
          receiptDesc = '已读'
        } else {
          receiptDesc = '未读'
        }
      } else {
        let groupMembers = wfc.getGroupMemberIds(conversation.target, false)
        if (!groupMembers || groupMembers.length === 0) {
          receiptDesc = ''
        } else {
          let memberCount = groupMembers.length
          let readCount = 0

          let readUserIds = []
          let unreadUserIds = []
          groupMembers.forEach((memberId) => {
            let readDt = readEntries ? readEntries.get(memberId) : 0
            if (
              (readDt && gte(readDt, timestamp)) ||
              this.message.from === memberId
            ) {
              readCount++
              readUserIds.push(memberId)
            } else {
              unreadUserIds.push(memberId)
            }
          })
          // receiptDesc = `已读 ${readCount}/${memberCount}`
          receiptDesc = ''
        }
      }
      return receiptDesc
    },

    isDownloading() {
      return store.isDownloadingMessage(this.message.messageId)
    },

    shouldShowMessageReceipt() {
      let show = false
      if (this.message.conversation.type === ConversationType.Group) {
        show = this.sharedConversationState.isGroupMessageReceiptEnable
      } else if (this.message.conversation.type === ConversationType.Single) {
        show =
          this.sharedConversationState.isMessageReceiptEnable &&
          ['FireRobot', Config.FILE_HELPER_ID].indexOf(
            this.message.conversation.target
          ) < 0
      }
      return show
    },
  },

  provide() {
    return {
      messageReadStatus: this.messageReadStatus,
    }
  },
}
</script>

<style lang="scss" scoped>
.message-time-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.message-time-container.checked {
  background-color: var(--color-active-2);
}

.message-time-container .time {
  margin: 15px auto;
  text-align: center;
  font-size: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 2px 5px;
  border-radius: 100px;
}

.message-time-container .receipt {
  margin-right: 70px;
  font-size: 12px;
  color: #b4b4b4;
}

.message-content-container {
  width: 100%;
  display: flex;
  padding: 10px 20px 4px 20px;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.message-avatar-content-container {
  display: flex;
  max-width: calc(100% - 60px);
  overflow: hidden;
  /*max-height: 800px;*/
  margin-left: auto;
  text-overflow: ellipsis;
  align-items: flex-end;
}

.message-content-container-view.highlight {
  background-color: #dadada;
  opacity: 0.5;
  --out-arrow-color: #dadada !important;
}

.icon-radio {
  width: 20px;
  height: 20px;
}
</style>
